<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Signup Example</title>
    <!-- font loading -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="form-wrapper">
        <div class="form-side">
            <a href="#" title="Logo">
                <img class="logo" src="assets/logo.png" alt="Logo">
            </a>
            <form class="my-form">
                <div class="login-welcome-row">
                    <h1>Create your account &#x1F44F;</h1>
                </div>
                <div class="socials-row">
                    <a href="#" title="Use Google">
                        <img src="assets/google.png" alt="Google">
                        Sign up with Google
                    </a>
                    <a href="#" title="Use Apple">
                        <img src="assets/apple.png" alt="Apple">
                        Sign up with Apple
                    </a>
                </div>
                <div class="divider">
                    <span class="divider-line"></span>
                    Or
                    <span class="divider-line"></span>
                </div>
                <div class="text-field">
                    <label for="email">Email:
                        <input type="email" id="email" name="email" autocomplete="off" placeholder="Your Email"
                            required>
                        <!-- svg icon -->
                    </label>
                </div>
                <div class="text-field">
                    <label for="password">Password:
                        <input id="password" type="password" name="password" placeholder="Your Password"                title="Minimum 6 characters at least 1 Alphabet, 1 Number and 1 Symbol"
                pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_])[A-Za-z\d\W_]{6,}$" required>
                        <!-- svg icon -->
                    </label>
                </div>
                <div class="text-field">
                    <label for="confirm-password">Repeat Password:
                        <input id="confirm-password" type="password" name="password" placeholder="Repeat Password"
                                            title="Minimum 6 characters at least 1 Alphabet, 1 Number and 1 Symbol"
                         pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[\W_])[A-Za-z\d\W_]{6,}$" required>
                        <!-- svg -->
                    </label>
                </div>
                <button class="my-form__button" type="submit">
                    Sign up
                </button>
                <div class="my-form__actions">
                    <div class="my-form__row">
                        <span>Did you forget your password?</span>
                        <a href="#" title="Reset Password">
                            Reset Password
                        </a>
                    </div>
                    <div class="my-form__signup">
                        <a href="#" title="Login">
                            Login
                        </a>
                    </div>
                </div>
            </form>
        </div>
        <div class="info-side">
            <img src="assets/mock.png" alt="Mock" class="mockup" />
            <div class="welcome-message">
                <h2>Navitron Maps! 👋</h2>
                <p>
                    Your ultimate guide to navigating the world
                    and discovering new places with ease.
                </p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>